import {
  ContactShadows,
  Environment,
  OrbitControls,
  Sky,
} from "@react-three/drei";
import { useFrame } from '@react-three/fiber'
import { useControls } from "leva";
import { Avatar } from "./Avatar";
import * as THREE from "three"
import { useRef } from "react";
export const Experience = () => {
  const { animation } = useControls({
    animation: {
      value: "Typing",
      options: ["Typing", "Falling", "Standing"],
    },
  });
  const meshRef = useRef();
  const meshBoxRef = useRef();

  // 使用useFrame钩子来更新旋转  
  useFrame(({ clock }) => {
    const a = clock.getElapsedTime();
    meshRef.current.rotation.x += 0.01;
    meshBoxRef.current.rotation.y = Math.sin(clock.getElapsedTime())
  });
  return (
    <>
      <OrbitControls />
      <Sky />
      {/* <Environment preset="sunset" /> */}
      <group position-y={-1}>
        <ContactShadows
          opacity={0.42}
          scale={10}
          blur={1}
          far={10}
          resolution={256}
          color="#000000"
        />
        <Avatar animation={animation} />
        {animation === "Typing" && (
          <mesh scale={[0.8, 0.5, 0.8]} position-y={0.25}>
            <boxGeometry />
            <meshStandardMaterial color="white" />
          </mesh>
        )}
        <mesh ref={meshBoxRef} position={[-1.2, 0.5, 0]}
          rotation={[THREE.MathUtils.degToRad(45), 0, 0]}
        >
          <boxGeometry args={[0.5, 0.5, 0.5]} />
          <meshStandardMaterial color={"hotpink"} side={THREE.FrontSide} />
        </mesh>
        <mesh position={[-2, 0.5, 0]}>
          <boxGeometry args={[0.5, 0.5, 0.5]} />
          <meshStandardMaterial color={"hotpink"} side={THREE.BackSide} />
        </mesh>
        <mesh ref={meshRef} position={[1.2, 0.5, 0]}>
          <sphereGeometry args={[0.5, 32, 32]} />
          <meshNormalMaterial />
        </mesh>
        <mesh scale={5} rotation-x={-Math.PI * 0.5} position-y={-0.001}>
          <planeGeometry />
          <meshStandardMaterial color="white" />
        </mesh>
      </group>
      <ambientLight color={"#fff2f2"} intensity={1} />
      <directionalLight position={[0, 0, 3]} intensity={1} />
      <directionalLight position={[0, 3, 3]} intensity={0.5} />
    </>
  );
};
